<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<style type="text/css">
	 table thead tr th {
	 	text-align:center;
	 }
 	</style>
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>
<div id="root" style='padding:20px;'>
	<div class="panel panel-primary">
		<div class='panel-heading'>用户管理页面</div>
		<table class="table table-bordered table-striped text-center">
			<thead>
				<tr>
					<th>用户名</th>
					<th>年龄</th>
					<th>毕业学校</th>
					<th>备注</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<template v-for="(index,row) in rows">
					<tr>
						<td>{{row.Name}}</td>
						<td>{{row.Age}}</td>
						<td>{{row.School}}</td>
						<td>{{row.Remark}}</td>
						<td><a href="#" @click='Edit(row)'>编辑</a> <a href="#" @click='Delete(index)'>删除</a></td>
					</tr>
				</template>
				<tr>
					 <td><input type="text" class="form-control" v-model="rowtemplate.Name" /></td>
					 <td><input type="text" class="form-control" v-model="rowtemplate.Age" /></td>
					 <td><select class="form-control" v-model="rowtemplate.School">
					 　　　　　　　　　　　　　　　　 <option>中山小学</option>
					 　　　　　　　　　　　　　　　　<option>复兴中学</option>
					 　　　　　　　　　　　　　　　　<option>光明小学</option>
					　　　　　　　　　　　　　　　　</select></td>
					 <td><input type="text" class="form-control" v-model="rowtemplate.Remark" /></td>
					 <td><button type="button" class="btn btn-primary" v-on:click="Save">保存</button></td>
				</tr>
				 <tr>
				 	<td></td>
				 	<td></td>
				 	<td></td>
				 	<td></td>
				 	<td><button class='btn btn-success' v-on:click='Sort'>排序</button></td>
				 </tr>
			</tbody>
		</table>
	</div>
</div>
<script>
	var vm = new Vue({
		el : '#root',
		data : {
			rows: [
				 { Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' },
				 { Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' },
				 { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' },
				 { Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' },
				 { Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
				 { id: 6, Name: '李金文', Age: 21, School: '中山小学', Remark: '唯有爱才是最美'},
				 { id: 7, Name: '费曼', Age: 35, School: '复兴中学', Remark:'费曼学习法'},
				 { id: 8, Name: '伽罗瓦', Age: 19, School: '中山小学', Remark:'数论创始人'},
				 { id: 9, Name: '笛卡尔', Age: 30, School: '剑桥大学', Remark:'创建笛卡尔直角坐标系'},
				 { id: 10,Name: '高斯', Age:'28', School:'斯坦福大学', Remark:'高斯是数学王子'}
			 ],
			 rowtemplate: { Id: 0, Name: '', Age: '', School: '', Remark: '' },
		},
		methods : {
			Sort : function(){
				var temp = null;
				for( var i=0;i<this.rows.length;i++ ){
					for(var j=i+1;j<=this.rows.length-1;j++){
						if(this.rows[i].Age<this.rows[j].Age){
							temp = this.rows[i];
							this.rows[i] = this.rows[j];
							this.rows[j] = temp;
						}
					}
				}
				this.rows = this.rows.slice();
			},
			Save : function(){
				if(this.rowtemplate.Id===0&&this.rowtemplate.Name!==''&&this.rowtemplate.School!==''&&this.rowtemplate.Remark!==''){
					this.rowtemplate.Id = this.rows.length+1;
					this.rows.push(this.rowtemplate);
					
				}
				this.rowtemplate = { Id: 0, Name: '', Age: '', School: '', Remark: '' };
			},
			Edit : function(row){
				console.log(row);//传来来的参数
				console.log(this.rowtemplate);//
				this.rowtemplate = row;
			},
			Delete : function(index){//根据传进来的id判断哪一行要删除
				for( var i=0;i<this.rows.length;i++ ){
					if(i===index){
						this.rows.splice(i,1);
						break;
					}
				}
			}
		}
	})
</script>	
</body>
</html>